<template lang="html">
    <section :class="cname">
        <!-- 轮播图框架 -->
        <swiper :options="options" :not-next-tick="options.notNextTick">
            <!-- 轮播图内容 -->
            <swiper-slide v-for="(item,index) in items" :key="index">
                <router-link :to="{ name:item.href}">
                    <img :src="item.src">
                </router-link>
            </swiper-slide>
            <!--  v-if="options.pagination" ==>判断是否有指示器 -->
            <div class="swiper-pagination" v-if="options.pagination" slot="pagination"></div>
        </swiper>
    </section>
</template>
<script>
    import { swiper, swiperSlide } from "vue-awesome-swiper";
    export default {
        components: {
            swiper,
            swiperSlide
        },
        props: {
            items: {
                type: Array,
                default() {
                    return []//href ==>跳转的链接  scr=>图片路径
                }
            },
            options: {
                type: Object,
                default() {
                    return {
                        autoplay: true,//是否有滚动效果
                        loop: true,//是否循环
                        notNextTick: false,//是否可以点击
                        pagination: {
                            el: ".swiper-pagination",
                        },
                    }
                }
            },
            cname: {
                type: String,
                default: ""
            }
        }
    }
</script>
<style lang="scss">
    @import "~swiper/dist/css/swiper.css";
</style>